<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>[[${admin_site_title}]]登录</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="css/blue.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/AdminLTE.min.css">
  <!-- jQuery 3 -->
  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap 3.3.7 -->
  <script src="js/bootstrap.min.js"></script>
  <!-- iCheck -->
  <script src="js/icheck.min.js"></script>
  <!-- CryptoJS for password encryption -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <a href="#">教务管理系统</a>
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">登录</p>
    <form id="loginForm">
      <div class="form-group has-feedback">
        <input type="text" name="uname" class="form-control" placeholder="用户名">
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input type="password" name="passwd" class="form-control" placeholder="密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
      <div class="row">
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox" name="remember" id="rememberCheckbox"> 保存密码
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="button" id="btnLogin" class="btn btn-primary btn-block btn-flat">登录</button>
        </div>
        <!-- /.col -->
      </div>
    </form>
    <a href="register" class="text-center">注册</a>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<script th:inline="none">
  $(function () {
    // 确保 DOM 完全加载后初始化 iCheck
    setTimeout(function() {
      $('input[type="checkbox"]').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' /* optional */
      });
      
      // 添加明显的视觉反馈
      $('#rememberCheckbox').on('ifChecked', function(event) {
        $(this).closest('.checkbox').addClass('text-primary');
      });
      
      $('#rememberCheckbox').on('ifUnchecked', function(event) {
        $(this).closest('.checkbox').removeClass('text-primary');
      });
    }, 100);
    
    // 检查是否有保存的登录信息
    loadSavedCredentials();
    
    // 登录按钮点击事件
    $('#btnLogin').click(function() {
      var uname = $('input[name="uname"]').val();
      var passwd = $('input[name="passwd"]').val();
      var remember = $('input[name="remember"]').is(':checked');
      
      if (!uname || !passwd) {
        alert('请输入用户名和密码');
        return;
      }
      
      // 如果选择了"保存密码"，则保存到本地存储
      if (remember) {
        saveCredentials(uname, passwd);
      } else {
        clearSavedCredentials();
      }
      
      // 提交登录
      $.ajax({
        url: 'dologin',
        type: 'POST',
        data: {
          uname: uname,
          passwd: passwd,
          remember: remember
        },
        dataType: 'json',
        success: function(response) {
          if (response.Status === 'ok') {
            window.location.href = response.url;
          } else {
            alert(response.msg || '登录失败，请检查用户名和密码');
          }
        },
        error: function() {
          alert('服务器错误，请稍后再试');
        }
      });
    });
    
    // 保存凭据到本地存储（使用简单加密）
    function saveCredentials(username, password) {
      try {
        // 使用简单加密存储密码
        var encryptedPassword = CryptoJS.AES.encrypt(password, 'secret-key').toString();
        localStorage.setItem('savedUsername', username);
        localStorage.setItem('savedPassword', encryptedPassword);
        localStorage.setItem('rememberMe', 'true');
      } catch (e) {
        console.error('保存凭据失败:', e);
      }
    }
    
    // 从本地存储加载保存的凭据
    function loadSavedCredentials() {
      try {
        var savedUsername = localStorage.getItem('savedUsername');
        var savedPassword = localStorage.getItem('savedPassword');
        var rememberMe = localStorage.getItem('rememberMe');
        
        if (savedUsername && savedPassword && rememberMe === 'true') {
          // 解密密码
          var decryptedPassword = CryptoJS.AES.decrypt(savedPassword, 'secret-key').toString(CryptoJS.enc.Utf8);
          
          // 填充表单
          $('input[name="uname"]').val(savedUsername);
          $('input[name="passwd"]').val(decryptedPassword);
          
          // 选中"记住我"复选框
          $('#rememberCheckbox').iCheck('check');
        }
      } catch (e) {
        console.error('加载凭据失败:', e);
      }
    }
    
    // 清除保存的凭据
    function clearSavedCredentials() {
      localStorage.removeItem('savedUsername');
      localStorage.removeItem('savedPassword');
      localStorage.removeItem('rememberMe');
    }
  });
</script>
</body>
</html>